<template>
  <div class="login_container">
    <div class="bg"></div>
    <div class="header">
      <img src="#" alt="" />
    </div>
    <div id="try">
      <div class="rollbox" :class="{ box_rolling: isRolling }">
        <!-- 前面div -->
        <div class="rollbox_front">
          <div class="contentbox">
            <div class="login_box">
              <div
                class="login_top"
                style="font-size: 32px; letter-spacing: 4px"
              >
                会员登录
              </div>
              <!-- 登录表单 -->
              <el-form
                :model="loginForm"
                :rules="loginRules"
                ref="loginForm"
                class="login_form"
              >
                <el-form-item label="账号" class="in" prop="username">
                  <el-input
                    v-model="loginForm.username"
                    prefix-icon="el-icon-user-solid"
                    placeholder="请输入用户名或邮箱"
                  ></el-input>
                </el-form-item>
                <el-form-item label="密码" class="in" prop="password">
                  <el-input
                    v-model="loginForm.password"
                    prefix-icon="el-icon-lock"
                    placeholder="请输入密码"
                    show-password
                    type="password"
                    @keyup.enter.native="login"
                  ></el-input>
                </el-form-item>
                <el-form-item class="butoton">
                  <el-button
                    type="primary"
                    @click="login"
                    style="margin-top: 30px; float: left; margin-left: 5px"
                    >登 录</el-button
                  >
                  <el-button
                    type="primary"
                    @click="isRolling = !isRolling"
                    style="margin-top: 30px; float: right; margin-right: 5px"
                    >这就去注册</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 后面div -->
        <div class="rollbox_behind">
          <div class="contentbox">
            <div class="register_box">
              <div
                class="register_top"
                style="font-size: 32px; letter-spacing: 4px"
              >
                会员注册
              </div>
              <el-form
                class="register_form"
                :model="registerForm"
                :rules="registerRules"
                ref="registerForm"
              >
                <el-form-item label="注册用户名" prop="username">
                  <el-input
                    v-model="registerForm.username"
                    prefix-icon="el-icon-user-solid"
                    placeholder="请输入一个用户名"
                  ></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input
                    v-model="registerForm.email"
                    prefix-icon="el-icon-message"
                    placeholder="请输入一个有效邮箱"
                  ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input
                    v-model="registerForm.password"
                    prefix-icon="el-icon-lock"
                    show-password
                    placeholder="请输入密码"
                    type="password"
                  ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="password2">
                  <el-input
                    v-model="registerForm.password2"
                    prefix-icon="el-icon-lock"
                    show-password
                    placeholder="请再次确认密码"
                    type="password"
                  ></el-input>
                </el-form-item>
                <el-form-item label="邮箱验证码" prop="code">
                  <el-input
                    v-model="registerForm.code"
                    prefix-icon="el-icon-lock"
                    placeholder="请输入收到的邮箱验证码"
                    @keyup.enter.native="register"
                    ><el-button
                      slot="append"
                      style="width: 120px"
                      @click="getCode"
                      >获取验证码</el-button
                    ></el-input
                  >
                </el-form-item>
                <el-form-item style="padding-top: 20px">
                  <el-button
                    type="primary"
                    @click="isRolling = !isRolling"
                    style="float: left; margin-left: 12px"
                    >返回登录页</el-button
                  >
                  <el-button
                    type="primary"
                    @click="register"
                    style="float: right; margin-right: 12px"
                    >注 册</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { hex_md5 } from "../assets/md5.js";
export default {
  name: "try",
  data() {
    const validatePassword = (rule, value, callback) => {
      if (this.registerForm.password2 !== this.registerForm.password)
        callback("两次密码不一致");
      else callback();
    };
    return {
      //表单绑定对象
      beforeUrl: "",
      loginForm: {
        username: "",
        password: "",
      },
      //表单规则验证
      loginRules: {
        //用户名规则
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        //密码验证
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      isRolling: false,
      registerForm: {
        username: "",
        password: "",
        email: "",
        password2: "",
        code: "",
      },
      //表单规则验证
      registerRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        password2: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validatePassword, trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入邮箱验证码", trigger: "blur" },
        ],
      },
      press_time: 0, //用于获取验证码按钮30s
    };
  },
  // beforeRouteEnter(to, from, next) {
  //   next((vm) => {
  //     vm.beforeUrl = from.path;
  //   });
  // },
  methods: {
    login() {
      // 表单预验证;>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return;
        this.$http
          .post("/user/login", {
            user_nick_name: this.loginForm.username,
            user_password: this.loginForm.password,
          })
          .then((res) => {
            if (res.data.success === "true") {
              window.sessionStorage.setItem(
                "user_name",
                res.data.user_nick_name
              ); //储存name
              window.sessionStorage.setItem("user_id", res.data.user_id); //储存id
              window.sessionStorage.setItem(
                "user_avatar",
                res.data.user_avatar
              ); //储存头像
              window.sessionStorage.setItem("session_id", res.data.session_id); //储存session_id
              window.sessionStorage.setItem(
                "portal_id",
                res.data.research_portal_id
              ); //门户id
              this.$message.success(res.data.message);
              if (res.data.user_id[0] === "-") {
                this.$stroe.commit("adminLogin");
                this.$router.push("/Manage");
              } else {
                this.$store.commit("login");
                this.$roter.push("/Mainpage");
              }
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error("网络错误,请稍后再试!");
          });
      });
    },
    register() {
      // var uname = this.registerForm.username;
      // var email = this.registerForm.email;
      // var password = hex_md5(this.registerForm.password + "lzy");
      this.$refs.registerForm.validate(async (valid) => {
        if (!valid) return;
        this.$http
          .post("/user/register", {
            user_mail: this.registerForm.email,
            verify_code: this.registerForm.code,
            user_nick_name: this.registerForm.username,
            user_password: this.registerForm.password,
          })
          .then((res) => {
            if (res.data.success === "true")
              this.$message.success(res.data.message);
            else this.$message.error(res.data.message);
          })
          .catch((err) => {
            this.$message.error("网络错误,请稍后再试!");
          });
      });
    },
    getCode() {
      //获取验证码
      if (this.registerForm.email === "") {
        this.$message.info("请先输入邮箱!");
        return;
      }
      var timestamp = Date.parse(new Date());
      var wait = timestamp - this.press_time;
      if (wait > 30000) {
        //>>>>>>获取验证码
        this.$http
          .post("/user/sendSMS", { user_mail: this.registerForm.email })
          .then((res) => {
            if (res.data.success === "true") {
              this.$message.success(res.data.message);
              this.press_time = timestamp;
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error("网络错误,请稍后再试!");
          });
      } else {
        this.$message("请在" + (30000 - wait) / 1000 + "秒后再试!");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  background-image: url(https://th.bing.com/th/id/Rd6b536429ab44afea81917a8b972f985?rik=o7vAgRE0JiouTw&riu=http%3a%2f%2fwww.tianlaiedu.com%2fUpFile%2fimage%2f20180117%2f20180117151032_8959.jpg&ehk=wOF%2b7u%2bACDKInZslJo4ciopiJ%2b6e8j7Wzq%2fNbvTLxuM%3d&risl=&pid=ImgRaw);
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
}
.login_container {
  height: 100%;
  // 以下代码为添加背景视频新增的
  position: relative;
  overflow: hidden;
  padding: 0px;
  // min-height: 100vh;
}
.header {
  width: 100%;
  height: 60px;
  line-height: 60px;
}

.login_box {
  width: 460px;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.login_box .login_top {
  display: inline-block;
  width: 100%;
  height: 70px;
  background-color: rgba(240, 240, 240, 0.25);
  font-size: 38px;
  text-align: center;
  line-height: 80px;
  border-radius: 5px 5px 0 0;
}
/deep/ .el-button {
  font-size: 17px;
  width: 170px;
}
.login_form {
  padding: 30px 40px;
}
/deep/.el-input__inner {
  font-size: 19px;
}
/deep/.el-form-item__label {
  font-size: 20px;
}

.video_bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  z-index: -10;
}

#try {
  .rollbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    // margin: 100px auto;

    &_front,
    &_behind {
      transform-style: preserve-3d; //表示所有子元素在3D空间中呈现
      backface-visibility: hidden; //元素背面向屏幕时是否可见
      transition-duration: 0.5s;
      transition-timing-function: "ease-in";
      // background: #008080;
      .contentbox {
        width: 200px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        > img {
          width: 100px;
        }
      }
    }
    &_behind {
      transform: rotateY(180deg);
      visibility: hidden; //元素不可见，但占据空间
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  }
  .box_rolling {
    .rollbox_front {
      transform: rotateY(180deg);
      visibility: hidden;
    }
    .rollbox_behind {
      transform: rotateY(360deg);
      visibility: visible;
    }
  }
}
.register_box {
  width: 460px;
  height: 605px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.register_box .register_top {
  display: inline-block;
  width: 100%;
  height: 60px;
  background-color: rgba(240, 240, 240, 0.25);
  font-size: 32px;
  text-align: center;
  line-height: 60px;
  border-radius: 5px 5px 0 0;
}
.register_form {
  box-sizing: border-box;
  padding: 5px 30px;
}
/deep/ .el-form-item {
  margin-bottom: 12px;
}
.background {
  background-size: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}
</style>